<template>
  <u-popup :show="value" @close="close" round="10" mode="center" closeable>
    <view
      :class="[
        'editPassword',
        current == 0 ? 'taba' : '',
        current == 1 ? 'tabb' : '',
        current == 2 ? 'tabc' : ''
      ]"
    >
      <view class="title">
        <view class="left-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>

        <view class="content">修改手机号</view>

        <view class="right-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="authcode" v-if="current == 0">
        <view class="code">
          <view class="titleCode">
            原手机号不能接收验证码的,请联系<button
              class="button"
              open-type="contact"
            >
              平台客服
            </button>
          </view>
          <view class="btn" v-if="getCode" @click="sendEvent">{{
            !countDown ? '发送验证码' : countDown + 's'
          }}</view>
          <u-code-input
            v-model="codeA"
            :maxlength="6"
            hairline
            mode="line"
            @finish="finishDone"
            v-else
          ></u-code-input>
        </view>
        <view class="resetSend">
          请输入验证码,未收到？<i class="send" @click="send">{{
            !countDown ? '点击重发' : countDown + 's'
          }}</i></view
        >
      </view>
      <view class="authcodeA" v-if="current == 1">
        <view class="label">
          新手机号码
        </view>
        <view class="inputA">
          <u--input
            placeholder="请输入新手机号"
            border="bottom"
            v-model="newMobile"
            @confirm="sendNewMobile"
          ></u--input>
          <view class="tips">
            仅支持中国（大陆）境内11位手机号<text>*</text>
          </view>
        </view>
      </view>
      <view class="authcodeB" v-if="current == 2">
        <view class="code">
          <u-code-input
            v-model="codeB"
            :maxlength="6"
            hairline
            mode="line"
            @finish="finishDoneB"
          ></u-code-input>
        </view>
        <view class="resetSend">
          请输入验证码,未收到？<i class="send" @click="sendB">{{
            !countDown ? '点击重发' : countDown + 's'
          }}</i>
        </view>
      </view>
    </view>
    <u-code
      unique-key="page-b"
      :seconds="seconds"
      @end="end"
      @start="start"
      ref="uCode"
      @change="codeChange"
      :keepRunning="true"
    ></u-code>
    <u-toast ref="uToast"></u-toast>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    mobile: {
      type: String,
      default: false
    }
  },
  data () {
    return {
      current: 0,
      seconds: 60,
      countDown: '',
      getCode: true,
      getCodeA: false,
      codeA: '',
      codeB: '',
      newMobile: ''
    }
  },
  methods: {
    close () {
      this.current = 0
      this.seconds = 60
      this.countDown = ''
      this.codeA = ''
      this.codeB = ''
      this.newMobile = ''
      this.getCode = true
      this.getCodeA = false
      this.$emit('input', false)
    },
    async finishDone () {
      try {
        const res = await this.$api.my.EditMobile({ code: this.codeA })
        console.log(res)
        this.current = 1
      } catch (error) {
        uni.$u.toast(error.msg)
        this.codeA = ''
      }
    },
    async finishDoneB () {
      try {
        const res = await this.$api.my.EditMobileTwo({
          code: this.codeB,
          mobile: this.newMobile
        })
        console.log(res)
        uni.$u.toast('修改成功!')
        setTimeout(() => {
          this.close()
          this.$emit('update')
        }, 1000)
      } catch (error) {
        uni.$u.toast(error.msg)
        this.codeB = ''
      }
    },
    async sendEvent () {
      if (!this.countDown) {
        try {
          await this.$api.common.sendCode({ code_type: 6, mobile: this.mobile })
          this.$refs.uCode.start()
          this.getCode = this.$refs.uCode.canGetCode
        } catch (error) {
          uni.$u.toast(error.msg)
        }
      }
    },
    async send () {
      if (!this.countDown) {
        this.$refs.uCode.start()
        await this.$api.common.sendCode({ code_type: 6, mobile: this.mobile })
      }
    },
    async sendB () {
      if (!this.countDown) {
        this.$refs.uCode.start()
        await this.$api.common.sendCode({
          code_type: 4,
          mobile: this.newMobile
        })
      }
    },
    async sendNewMobile () {
      const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (reg.test(this.newMobile)) {
        this.current = 2
        this.$refs.uCode.start()
        await this.$api.common.sendCode({
          code_type: 4,
          mobile: this.newMobile
        })
      } else {
        uni.$u.toast('请输入正确的手机号!')
      }
    },
    codeChange (v) {
      this.countDown = isNaN(+v.split('秒')[0]) ? 0 : +v.split('秒')[0]
    },
    start () {
      console.log('倒计时开始')
    },
    end () {
      this.getCodeA = this.$refs.uCode.canGetCode
      console.log('倒计时结束')
    }
  }
}
</script>

<style lang="less" scoped>
.taba {
  min-width: 600rpx;
  min-height: 390rpx;
  position: relative;
}

.tabb {
  min-width: 600rpx;
  min-height: 320rpx;
}

.tabb {
  min-width: 600rpx;
  min-height: 346rpx;
}

.editPassword {
  padding-top: 60rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35rpx;
    .left-icon {
      width: 30rpx;
      height: 30rpx;
    }
    .content {
      color: #333333;
      font-weight: 600;
      font-size: 34rpx;
      margin: 0 13rpx;
      letter-spacing: 4rpx;
    }
    .right-icon {
      width: 30rpx;
      height: 30rpx;
      transform: rotateY(180deg);
    }
  }
  .authcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20rpx 50rpx 0 50rpx;
    height: 245rpx;
    .titleCode {
      width: 519rpx;
      text {
        color: #3e73fe;
      }
    }
    .btn {
      width: 100%;
      height: 85rpx;
      background: #3e73fe;
      color: #fff;
      border-radius: 60rpx;
      text-align: center;
      line-height: 85rpx;
      margin: 30rpx 0px;
    }
    .code {
      width: 100%;
      margin-bottom: 20rpx;
    }
    .resetSend {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 18rpx;
      width: 100%;
      color: #999999;
      letter-spacing: 4rpx;
      .send {
        color: #3e73fe;
      }
    }
  }
  .authcodeA {
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    .label {
      font-size: 25rpx;
    }
    .inputA {
      position: relative;
      .tips {
        position: absolute;
        top: 88rpx;
        right: 0;
        font-size: 20rpx;
        color: #666666;
        text {
          color: #ff8585;
        }
      }
    }
  }
  .authcodeB {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20rpx 50rpx 0 50rpx;
    height: 245rpx;
    .code {
      width: 100%;
      margin-bottom: 20rpx;
    }
    .resetSend {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 18rpx;
      width: 100%;
      color: #999999;
      letter-spacing: 4rpx;
      .send {
        color: #3e73fe;
      }
    }
  }
}

.button {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  border: 0 !important;
  background-color: #fff !important;
  display: inline-block !important;
  color: #3e73fe !important;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent;
  &::after {
    border: 0 !important;
  }
}
</style>
